<template>
    <!-- 折线和柱状一体图 -->
    <div :style="{ width: width, height: height}">
        <div id="main" :style="{ width: width, height: height, background: background }" ref="chart"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    data() {
        return {
            myChart: {},
            option: {}
        }
    },
    props: {
        width: {
            type: String,
            default: '460px'
        },
        height: {
            type: String,
            default: '280px'
        },
        background: {
            type: String,
            default: '#fff'
        },
        legendData: {
            type: Array,
            default: () => ['车型1', '折线2']
        },
        xAxisData: {
            type: Array,
            default: () => ['车型1', '车型2', '车型3', '车型4', '车型5', '车型6', '车型7',]
        },
        yAxisData: {
            type: Array,
            default: () => [
                { min: 80, max: 230, interval: 50 },
                { min: 80, max: 230, interval: 50 },
            ]
        },
        seriesData: {
            type: Array,
            default: () => [
                {
                    data: [
                        99.0, 200, 122, 203.2, 167.6, 99.7, 135.6,
                    ],
                    name: '车型1',
                    colorList: ['#f56c6c', '#ccc', '#f56c6c', '#f56c6c', '#ccc', '#f56c6c', '#f56c6c'],
                    company: "辆"
                },
                {
                    data: [
                        102.0, 80, 90, 123.2, 125.6, 176.7, 135.6,
                    ],
                    name: '折线2',
                    colorList: ['#f56c6c', '#ccc', '#f56c6c', '#f56c6c', '#ccc', '#f56c6c', '#f56c6c'],
                    company: "辆"
                },
            ]
        }
    },
    mounted() {
        // 初始化chart
        this.$nextTick(() => {
            // this.myChart = echarts.init(document.getElementById('main'))
            this.myChart = echarts.init(this.$refs.chart)
            this.drawChart()
        })
    },

    methods: {
        drawChart() {
            var that = this
            this.myChart.setOption({
                color: ['#f56c6c', '#999'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'none',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                toolbox: {
                    feature: {
                        dataView: { show: false, readOnly: false },
                        magicType: { show: false, type: ['line', 'bar'] },
                        restore: { show: false },
                        saveAsImage: { show: false }
                    }
                },
                legend: {
                    data: this.legendData
                },
                xAxis: [
                    {
                        type: 'category',
                        data: this.xAxisData,
                        axisPointer: {
                            type: 'none'
                        },
                        axisTick: {
                            show: false
                        },
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '',
                        min: this.yAxisData[0].min,
                        max: this.yAxisData[0].max,
                        interval: this.yAxisData[0].interval,
                        axisLabel: {
                            formatter: '{value}'
                        },
                        splitLine: {
                            show: false
                        },
                    },
                    {
                        type: 'value',
                        name: '',
                        min: this.yAxisData[0].min,
                        max: this.yAxisData[0].max,
                        interval: this.yAxisData[0].interval,
                        axisLabel: {
                            formatter: '{value}'
                        },
                        splitLine: {
                            show: false
                        },
                        show: false
                    }
                ],
                series: [
                    {
                        name: this.seriesData[0].name,
                        type: 'bar',
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + that.seriesData[0].company;
                            },
                        },
                        data: this.seriesData[0].data,
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                                    var colorList = that.seriesData[0].colorList;
                                    return colorList[params.dataIndex]
                                }
                            }
                        }
                    },
                    {
                        name: this.seriesData[1].name,
                        type: 'line',
                        yAxisIndex: 1,
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + that.seriesData[1].company;
                            },
                        },
                        data: this.seriesData[1].data,
                        label: {
                            show: true,
                            position: "top",
                            textStyle: {
                                color: "#000",
                            },
                        },
                    }
                ]
            });
            this.option && this.myChart.setOption(this.option);
        }
    }
}
</script>

<style>
</style>